<template>
	<view class="content">
		<!-- #ifdef H5 -->
		<view class="appDow" @click="dowApp">
			<image class="appImage" src="../../static/image/app_icon.png"></image>
			<view class="dowAppText">趣味答题、丰富生活   点击下载App</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- <view class="adBox" v-if="isAdShow">
			<ad adpid="1237469372" @load="adOnload" @error="onerror($event, '2')"></ad>
		</view> -->
		<!-- #endif -->
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="contentBox">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item  v-for="(item, i) in bannerList" :key="i">
				<!-- #ifdef H5 -->
				<view class="adBox" v-if="i == 1 && isAdShow">
					<ad adpid="1070955079"></ad>
				</view>
				<image class="bannerItem" v-else :src="item" mode="scaleToFill"></image>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image class="bannerItem" :src="item" mode="scaleToFill"></image>
				<!-- #endif -->
			</swiper-item>
		</swiper>
		
		<!-- #ifdef H5 -->
		<view class="adBox" v-if="isAdShow">
			<ad adpid="1237469372"></ad>
		</view>
		<!-- #endif -->
		
		<view class="typeBox">
			<view class="typeList">
				<view class="typeList-item" v-for="(item, i) in typeList" :key="i" @click="checkTypeList(item)">
					<image class="typeList-item-icon" :src="item.iconPath"></image>
					<view class="typeList-item-text">{{item.title}}</view>
				</view>
			</view>
		</view>
		<!-- <view>{{userInfo.name}}</view> -->
		<view class="recommend">
			<view class="recommend-title">
				<view class="title-line"></view>
				<view class="title-text">推荐活动</view>
			</view>
			<view class="recommend-list">
				<view class="recommend-list-item" v-for="(item, i) in recommend" :key="i" @click="checkDetails(item)">
					<image class="item-image" :src="item.imgUrl"></image>
					<view class="item-text">
						<view class="item-title">{{item.title}}</view>
						<view class="item-data">
							<view class="total">
								<image class="total-icon" src="../../static/image/total.png"></image>
								<view>{{item.total}}</view>
							</view>
							<view class="viewers">
								<image class="viewers-icon" src="../../static/image/viewer.png" mode=""></image>
								<view>{{item.viewers}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
	<!-- <view>{{getSystemInfo}}</view> -->
	<!-- #ifdef H5 -->
	<ad v-if="isAdShow" adpid="1070955079"></ad>
	<!-- #endif -->
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { getTime, mouldData } from '../../utils/index.js'
	export default {
		data() {
			return {
				title: 'Hello',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: ['../../static/banner/01.jpeg',
					'../../static/banner/02.png', '../../static/banner/03.webp'
				],
				typeList: [
					{title: '历史', iconPath: '../../static/banner/lishi.png', searchId: 1},
					{title: '地理', iconPath: '../../static/banner/dili.png', searchId: 2},
					{title: '植物', iconPath: '../../static/banner/zhiwu.png', searchId: 3},
					{title: '动物', iconPath: '../../static/banner/dongwu.png', searchId: 4}
				],
				recommend: [],
				getSystemInfo: '',
				isAdShow: false,
				dayTimeStorageData: '',
				dayTime: ''
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.dayTime = getTime()
			this.dayTimeStorageData = uni.getStorageSync(this.dayTime)
			
			// 数据初始化  获取缓存
			this.dataInit()
			
			this.$nextTick(() => {
				this.isAdShow = true
			})
			this.$http.getBaseList().then((res) => {
				this.recommend = res
			})
		},
		methods: {
			// 广告
			onerror(e){
				console.log('onerror', e)
			},
			adOnload(){
				console.log('onload')
			},
			// 数据初始化  获取缓存
			dataInit() {
				
				if (!this.dayTimeStorageData) {
					this.dayTimeStorageData = {}
					uni.setStorageSync(this.dayTime, this.dayTimeStorageData)
				}
				this.$store.commit('setDayTimeStorageData', this.dayTimeStorageData)
			},
			checkTypeList(item) {
				uni.navigateTo({
					url: "/pages/typeList/typeList?baseId=" + item.searchId + '&title=' + item.title
				})
			},
			checkDetails(item) {
				uni.navigateTo({
					url: "/pages/answerDetails/answerDetails?baseId=" + item.id + '&subjectId=' + item.id + '&title=' + item.title
				})
			},
			dowApp() {
				let link = document.createElement('a')
				  link.setAttribute('download', '趣味答题.APK')
					// link.download = '趣味答题.APK';
				  link.href = 'https://www.doupaopao.club/quweidati.apk'
				  link.click()
			  }
		},
	  onShareAppMessage(){}
	}
</script>

<style scoped lang="scss">
	.contentBox{
		padding: 0 25rpx;
		margin-top: 25rpx;
	}
	.appDow{
		display: flex;
		align-items: center;
		width: 100%;
		padding: 25rpx 0;
		z-index: 2;
		background-color: #FF9000;
		.appImage{
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx 0 25rpx;
		}
		.dowAppText{
			color: #fff;
			font-size: 30rpx;
		}
	}
	.swiper{
		width: 700rpx;
		height: 300rpx;
		border-radius: 20rpx;
		overflow: hidden;
		transform: translateY(0);
	}
	.bannerItem{
		width: 700rpx;
		height: 300rpx;
	}
	
	.adBox{
		height: 160px;
		margin-top: 50rpx;
		overflow: hidden;
	}
	.typeBox{
		margin-top: 50rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 26rpx #ccc;
	}
	.typeList{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 30rpx 0;
		.typeList-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.typeList-item-icon{
				width: 80rpx;
				height: 80rpx;
			}
			.typeList-item-text{
				margin-top: 10rpx;
			}
		}
	}

  .recommend{
		padding: 50rpx 0;
		.recommend-title{
			display: flex;
			align-items: center;
			.title-line{
				width: 10rpx;
				height: 30rpx;
				margin-right: 20rpx;
				background: #1296DB;
			}
			.title-text{
				font-size: 40rpx;
			}
		}
	  
		.recommend-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 50rpx;
			.recommend-list-item{
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				box-shadow: 0rpx 0rpx 26rpx #ccc;
				border-radius: 20rpx;
				overflow: hidden;
				.item-text{
					padding: 10rpx 10rpx 20rpx;
				}
				.item-image{
					width: 338rpx;
					height: 400rpx;
				}
				.item-data{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					.viewers, .total{
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #bbbbbb;
					}
					.total-icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					.viewers-icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
